<template>
  <div class="executor-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :append-to-body="true" :class="{'mobile':showMobilePage}" class="medium-common-dialog-size">
      <SectionTitle :title="title" font-size="16px" style="margin-bottom: 10px"/>
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane :label="`已填写（${finishedList.length}）`" name="finished" />
        <el-tab-pane :label="`未填写（${unfilledList.length}）`" name="unfilled" />
      </el-tabs> -->
      <DetailTabs v-model="activeName" :tabs="tabs" />
      <div class="scroll-content">
        <div v-if="getList.length" class="user-list">
          <div v-for="(item, index) in getList" :key="index" class="user-item">
            <CheckUserInfo :user-id="item.id" :no-loading="true" style="cursor: pointer;">
              <div class="avatar">
                <img :src="handelAvatar(item.avatar || defaultAvatar)" :alt="item.id">
              </div>
              <div :title="item.value" class="name ellipsisTwo">{{ item.value }}</div>
            </CheckUserInfo>
          </div>
        </div>
        <div v-else class="user-info-empty">
          <img :src="EmptyImage" alt="暂无数据">
          <div>{{ getTips }}</div>
        </div>
      </div>
      <div class="btn-container">
        <el-button
          v-loading="sending"
          v-if="getSendBtnStatus"
          :disabled="!unfilledList.length"
          :class="unfilledList.length && 'empty-btn-style'"
          size="small"
          @click="sendReminder"
        >发送通知</el-button>
        <el-button type="primary" size="small" @click="handleClose">知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SectionTitle from '@/components/Title';
import defaultAvatar from '@/assets/user-avatar.png';
import EmptyImage from '@/assets/empty-table-data.png';
import { sendReminder } from '@/api/energy';
import { hasRouteAuth } from '@/utils/permission';
import { PROGRESS_STEP } from '@/utils/const/energy';
import DetailTabs from '@/components/Common/baseComponent/DetailTabs';
export default {
  components: {
    SectionTitle, DetailTabs
  },
  props: {
    energyId: {
      type: [String, Number],
      default: ''
    },
    processStatus: {
      type: [String, Number],
      default: ''
    },
    unfilledList: {
      type: Array,
      default: () => []
    },
    finishedList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '查看人员'
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultAvatar,
      EmptyImage,
      sending: false,
      dialogVisible: false,
      activeName: 'finished'
    };
  },
  computed: {
    getList() {
      return this.activeName === 'finished' ? this.finishedList : this.unfilledList;
    },
    getTips() {
      return this.activeName === 'finished' ? '暂无已填写人员' : '不存在未填写人员';
    },
    getSendBtnStatus() {
      return hasRouteAuth('energy:energyList:sendReminder') && this.activeName === 'unfilled' && this.processStatus !== PROGRESS_STEP.FINISHED;
    },
    tabs() {
      return [
        { id: 'finished', name: `已填写（${this.finishedList.length}）` },
        { id: 'unfilled', name: `未填写（${this.unfilledList.length}）` }
      ];
    }
  },
  methods: {
    handleClose() {
      this.activeName = 'finished';
      this.dialogVisible = false;
    },
    handelAvatar(imgUrl) {
      if (imgUrl.indexOf('dingtalk.com') >= 0) {
        return imgUrl + '_40x40.jpg';
      }
      return imgUrl;
    },
    sendReminder() {
      this.sending = true;
      sendReminder({ id: this.energyId }).then(_ => {
        this.handleClose();
        this.sending = false;
        this.$message.success('发送成功');
      }).catch(_ => {
        this.handleClose();
        this.sending = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.scroll-content {
  max-height: 300px;
  margin-top: 20px;
  @include scrollBar($width: 6px);
}
.user-item{
  &::v-deep {
    .check-user-loading-container {
      display: inline-block !important;
    }
  }
}
.btn-container {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  ::v-deep .el-button {
    padding-left: 12px;
    padding-right: 12px;
  }
  .empty-btn-style {
    border-color: #406EFF;
    background: #fff;
    color: #406EFF;
    &:hover {
      background: #406EFF;
      color: #fff;
    }
  }
}
.mobile {
  ::v-deep .el-dialog {
    width: 100% !important;
  }
}
.user-info-empty {
  width: 100%;
  text-align: center;
  margin: 24px 0 0;
  overflow-y: hidden;
  color: #999;
  > img {
    width: 112px;
    margin-bottom: 8px;
  }
}
.user-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  transform: translateX(-10px);
  .user-item {
    flex-basis: 70px;
    margin: 0 5px 8px;
    text-align: center;
  }
  .avatar {
    > img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .name {
    font-size: 14px;
    line-height: 16px;
    color: #999;
    margin-top: 4px;
    height: 32px
  }
}
</style>
